<script setup>

</script>

<template>
<div class="all">
	<div class="a">
		<div class="headd">
			<p class="p1" style="line-height: 50px;">U本位永续</p>
			<p class="p2">BTC本位永续</p>
			<p class="p2">交割</p>
			<p class="p2">轮证</p>
			<p class="p3">模拟></p>
		</div>
		<div class="BTC">
			<img class="pic1" src="../assets/contract/01.png">
			<p>BTC/USDT</p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<img class="pic2" src="../assets/contract/02.png">
			<img class="pic3" src="../assets/contract/03.png">
			<img class="pic3" src="../assets/contract/04.png">

		</div>
		<div class="k">
			<select>
				<option>k线图</option>
			</select>
		</div>
		<div>
		<p class="p4">手工交易 &nbsp;&nbsp; 网格交易 &nbsp;&nbsp; 更多</p>

		<div class="zhucang">
			<select>
				<option>逐仓125.0X</option>
			</select>
		</div>
		<div class="xianjia">
			<select>
				<option>限价委托</option>
			</select>
		</div>
		<div class="num">
			<input type="number" step="0.1" value="27633.9">
		</div>
		<div class="num">
			<input placeholder="数量(BTC)" type="number" step="100">
		</div>

		<img class="pic4" src="../assets/contract/05.png">
		<p style="font-size: small ;color: dimgray;margin-top: 2px;margin-left: 10px;">可用 </p>
		<div class="checkbox">
			<input type="checkbox" />止盈止损
		</div>
		<div class="gaoji">
			<select>
				<option>高级选项</option>
			</select>
		</div>

		<div class="mairu">
			<table>
				<tr>
					<td>可做多</td>
					<td style="float: right">0</td>
				</tr>
				<tr>
					<td>保证金</td>
					<td style="float: right">0.00USTD</td>
				</tr>
			</table>
			<input type="button" value="买入/做多" />
		</div>
		<div class="maichu">
			<table>
				<tr>
					<td>可做空</td>
					<td style="float: right">0</td>
				</tr>
				<tr>
					<td>保证金</td>
					<td style="float: right">0.00USTD</td>
				</tr>
			</table>
			<input type="button" value="卖出/做空" />
		</div>


		<div class="zijin">
			资金费率<br>
			-0.018%
		</div>
		<div class="chicang">
			持仓量(USTD)<br>
			65321005
		</div>
		<div class="green">
			<p>价格
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量(BTC)</p>
			<div class="data1">
				<table>
					<tr>
						<td style="color:#3AB19B ">1</td>
						<td style="color:#3AB19B ">22222</td>
						<td class="td3">3333</td>
					</tr>

				</table>
			</div>
		</div>
		<p class="p5" style="color:#3AB19B ">27564.90</p>
		<p class="p6">25130.30</p>
		<div class="data2">
			<table>
				<tr>
					<td style="color:#B45D66 ">14</td>
					<td style="color:#B45D66 ">22222</td>
					<td class="td3" style="float: right">3333</td>
				</tr>

			</table>
		</div>
		<p class="p7">多空形势</p>
	</div>
		<div class="xingshi"></div>
		<hr>
		<div class="mid">
			<p class="p8">全站成交</p>
			<p class="p9">仓位</p>
			<p class="p10">当前委托</p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<img src="../assets/contract/07.png">
		</div>
		<div class="checkbox02">
			<input type="checkbox" />仅当前市场
		</div>
		<div class="pingcang">
			<input type="button" value="一键平仓"/>
		</div>
		<img class="pic8" src="../assets/contract/08.png">
	</div>

</div>

<app-footer></app-footer>
</template>

<style scoped>
.all {
	width: auto;
	height: auto;
	display: flex;
	/* justify-content:center; */
}

.a {
	width: 500px;
	height: 1000px;
	background-color: #F9FAFC;
}

.headd {
	display: flex;
	margin-left: 15px;
	/* justify-content: center; */
}

.p1 {
	margin-left: -5px;
}

.p2 {
	color: dimgrey;
	font-size: 10px;
	margin-top: 18px;
	margin-left: 15px;
}

.p3 {
	font-size: 10px;
	margin-top: 18px;
	margin-left: 110px;
}

.BTC {
	display: flex;
	margin-left: 5px;
	/* justify-content: center; */
}

.pic1 {
	width: 22px;
	height: 22px;
}

.pic2 {
	width: 22px;
	height: 22px;
	margin-left: 60px;
	padding-left: 150px;
}

.pic3 {
	width: 22px;
	height: 22px;
	margin-left: 8px;
}

.BTC p {
	margin-top: -1px;
	margin-left: 2px;
}

.k {
	width: 450px;
	height: 23px;
	border: none;
	margin-left: 10px;
}

.k select {
	width: 100%;
	height: 100%;
	border: none;
	background-color: #F7F7F7;
}

.p4 {
	font-size: 12px;
	margin-left: 10px;
	color: dimgrey;
}

.zhucang {
	width: 200px;
	height: 23px;
	border: none;
	margin-left: 10px;
}

.zhucang select {
	width: 100%;
	height: 100%;
	border: none;
	color: #343434;
	background-color: #F7F7F7;
}

.xianjia {
	width: 200px;
	height: 21px;
	border: none;
	margin-top: 15px;
	margin-left: 10px;
}

.xianjia select {
	width: 100%;
	height: 100%;
	border: none;
	color: #343434;
	background-color: #F7F7F7;
}

.num {
	width: 200px;
	height: 21px;
	border: none;
	margin-top: 15px;
	margin-left: 10px;
}

.num input {
	width: 100%;
	height: 100%;
	border: none;
	color: #343434;
	background-color: #F7F7F7;
}

.zijin {
	margin-left: 270px;
	margin-top: -430px;
	color: dimgrey;
	font-size: 10px;
}

.chicang {
	margin-left: 370px;
	margin-top: -32px;
	color: dimgrey;
	font-size: 10px;
}

.green p {
	margin-left: 275px;
	margin-top:5px;
	margin-bottom: 10px;
	color: dimgrey;
	font-size: 10px;
}

.data1 {
	margin-left: 250px;
	margin-top: -5px;
	width: 200px;
	height: 150px;
	font-size: 13px;
	background-color: #E6F9F7;
}

.data1 table {
	width: 100%
}

.td3 {
	float: right;
}

.p5 {
	margin-left: 250px;
	margin-top: 5px;
}

.p6 {
	margin-bottom: 10px;
	margin-left: 250px;
	font-size: 14px;
	color: #B7B7B7;
}

.pic4 {
	width: 200px;
	height: 18px;
	margin-left: 8px;
	margin-top: 8px;
}

.checkbox {
	font-size: 13px;
	color: #B7B7B7;
	margin-top: 10px;
	margin-left: 5px;
}

.gaoji {
	width: 80px;
	height: 21px;
	border: none;
	margin-top: 5px;
	margin-left: 3px;
}

.gaoji select {
	width: 100%;
	height: 100%;
	border: none;
	color: #343434;

}

.mairu {
	width: 200px;
	height: 80px;
	font-size: 12px;
	margin-top: 10px;
	margin-left: 10px;
	color: #B7B7B7;
	;

}

.mairu table {
	width: 100%;

}

.mairu input {
	border: none;
	background-color: #E93C3E;
	color: white;
	width: 200px;
	height: 28px;
	border-radius: 2px;
	font-size: 10px;
}

.maichu {
	width: 200px;
	height: 80px;
	font-size: 12px;
	margin-top: 10px;
	margin-left: 10px;
	color: #B7B7B7;
	;

}

.maichu table {
	width: 100%;

}

.maichu input {
	border: none;
	background-color: #10C1A4;
	color: white;
	width: 200px;
	height: 28px;
	border-radius: 2px;
	font-size: 10px;
}

.data2 {
	margin-left: 250px;
	margin-top: -5px;
	width: 200px;
	height: 150px;
	font-size: 13px;
	background-color: #FEECEA;
}

.data2 table {
	width: 100%;
}

.pic5 {
	width: 20px;
	float: right;
	margin-right: 10px;
	margin-top: 8px;
}

.p7 {
	margin-top: 10px;
	margin-left: 250px;
	font-size: 14px;
	color: #B7B7B7;
}

.xingshi {
	width: 180px;
	height: 30px;
	background-color: #FEECEA;
	float: right;
	margin-right: 50px;
	margin-bottom: 15px;
	border-radius: 20px;
	color: #B45D66
}

.mid {
	display: flex;
	margin-left: 15px;
	/* justify-content: center; */
}


.p8 {
	color: dimgrey;
	font-size: 10px;
	margin-top: 10px;
	margin-left: -5px;
}

.p9 {
	color: dimgrey;
	font-size: 10px;
	margin-top: 10px;
	margin-left: 25px;
}

.p10 {
	font-size: 10px;
	margin-top: 10px;
	margin-left: 25px;
}

hr {
	width: 100%;
	height: 10px;
	border: none;
	background-color: #F7F7F7;
	margin-top: 30px;

}

.mid img {
	width: 18px;
	height: 18px;
	margin-left: 185px;
	margin-top: 5px;
}

.putong {
	width: 120px;
	height: 21px;
	border: none;
	margin-top: 15px;
	margin-left: 10px;
}

.putong select {
	width: 100%;
	height: 100%;
	border: none;
	color: #343434;
	background-color: #F7F7F7;
}

.chexiao {
	width: 55px;
	height: 21px;
	background-color: #F7F7F7;
	color: dimgrey;
	font-size: 12px;
	margin-top: -30px;
	margin-left: 340px;
}

.checkbox02 {
	font-size: 13px;
	color: #B7B7B7;
	margin-top: 10px;
	margin-left: 5px;
}

.pic8 {
	width: 150px;
	margin-left: 100px;
	margin-top: 150px;
}

.pingcang{
	float: right;
	margin-top: -20px;
	margin-right: 88px;
	width: 10px;
	height: 10px;
	font-size: 10px;
}
</style>
